import { useEffect, useState, useRef } from 'react';
import { Form, Input, Button, Checkbox, Select, InputNumber, Flex } from 'antd';
// import CustomField from './CustomField';
import styles from './index.module.scss';
import PasswordChange from './PasswordChange'
const Option = Select.Option;
export default (props) => {
    const [form] = Form.useForm(); // 创建表单实例
    const initState = () => ({
        PasswaedVisible: false,
        useName: '张灿',
        user: {
            id: 1,
            name: 'zhang',
            nickName: 'zhang',
            email: '123@qq.com'
        }
    }),
        [state, setState] = useState(initState);
    const onFinish = (values) => {
        console.log('Success:', values);
    };
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    const handleClosePsdModal = () => {
        setState(o => ({
            ...o,
            PasswaedVisible: false
        }));
    };
    const handleOKPsdModal = () => {
        setState(o => ({
            ...o,
            PasswaedVisible: false
        }));
        // dispatch(setLoginOpen(false));
    }
    const handleClose = () => {
        form.setFieldsValue({ ...state.user });
    }
    const onSave = async () => {
        try {
            await form.validateFields().then(async (values) => {
                // let params = {
                //   password
                // }
                // editPassword(params).then(response => {
                //   if (response.code === 1) {
                //     message.success('密码修改成功');
                //   } else {
                //     message.error('密码修改失败');
                //   }
                // }).catch(e => {
                //     message.error(e?.message);
                // });
            })

        } catch (error) {
            // message.error('Something went wrong!');
        }
    }
    const changePsdFn = async () => {
        setState(o => ({
            ...o,
            PasswaedVisible: true
        }));
        // try {
        //   const res = await deviceApi.scanList();
        //   if (res.code == 200) {
        //     const newList = res.data.deviceGroupList || [];
        //     setDrawerList(newList);
        //   } else {
        //     Message.error('Scan Failed!');
        //   }
        // } catch (error) {
        //   Message.error('Failed to fetch scan list. Please try again later.');
        // }
    };
    useEffect(() => {
        form.setFieldsValue({ ...state.user });
    }, [state?.user, form]);

    return (
        <div className={styles.container}>
            <div className={styles.content}>
                {/* <div className={styles.titBlock}>
                    <div className='custom-title'>个人中心</div>
                </div> */}
                <div className={styles.fromContent}>
                    <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: '24px' }}>
                        <Button type='primary' onClick={changePsdFn}>重置密码</Button>
                    </div>
                    <Form
                        name="basic"
                        className='custom-form-primary'
                        labelCol={{ span: 9 }}
                        wrapperCol={{ span: 8 }}
                        form={form}
                    >
                        <Form.Item
                            label="用户ID"
                            name="id"
                        >
                            <Input disabled />
                        </Form.Item>

                        <Form.Item
                            label="用户名"
                            name="name"
                        >
                            <Input disabled />
                        </Form.Item>
                        <Form.Item
                            label="用户昵称"
                            name="nickName"
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="用户邮箱"
                            name="email"
                        >
                            <Input />
                        </Form.Item>
                        <div className={styles.btnGroup}>
                            <Form.Item noStyle>
                                <Button className={styles.cancelBtn} onClick={handleClose}>
                                    取消
                                </Button>
                                <Button type='primary' htmlType="submit" onClick={onSave}>
                                    确认
                                </Button>
                            </Form.Item>
                        </div>
                    </Form>
                </div>
            </div>
            <PasswordChange visible={state?.PasswaedVisible} useName={state?.useName} handleShut={handleClosePsdModal} handleSubmit={handleOKPsdModal} />
        </div>
    )
}
